<template>
  <!-- 招商联盟 -->
  <div>
    <div class="aboutZ">
      <h2>招商加盟</h2>
      <div class="Line"></div>
      <p style="color: #626262;">面向全国招募市级运营中心 期待您的加入 </p>
      <ul class="con">
        <li v-for="(item,index) in myList" :key="index" >
          <h4 v-animate="'queue-bottom'">{{ item.title }}</h4>
          <p v-animate="'queue-bottom'">{{ item.xiangqing }}</p>
        </li>
      </ul>
    </div>
    <div class="mincon">
      <div class="diannao">
        <div class="title">
          “&emsp;招商加盟&emsp;”
        </div>
        <div class="img">
          <img src="@/assets/images/aboutThree/diannao.png" alt="">
          <div v-for="(item,index) in pList" :key="index" class="rightImg" v-animate="'queue-bottom'">
            <img src="@/assets/images/aboutThree/jiantou.png" alt="" >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="path">
      <div class="zhuan">
        <div class="pathClass">
            <div class="imgDiv"><img src="@/assets/images/aboutThree/tijaio01.png" alt=""></div>
            <img src="@/assets/images/aboutThree/j1.png" alt="">
            <div class="imgDiv"><img src="@/assets/images/aboutThree/shouli02.png" alt=""></div>
            <img src="@/assets/images/aboutThree/j1.png" alt="">
            <div class="imgDiv"><img src="@/assets/images/aboutThree/shenpi03.png" alt=""></div>
        </div>
        <div class="pathClass" style="margin-bottom:20px">
              <div>提交申请</div>
              <div>公司受理</div>
              <div>公司审批</div>
        </div>
        <div class="pathClass">
          <img class="upZhuan" src="@/assets/images/aboutThree/j1.png" alt="">
          <img class="xuanzhuan" src="@/assets/images/aboutThree/j1.png" alt="">
        </div>
        <div class="pathClass" style="margin:20px 0">
          <div>
            <div class="imgDiv"><img src="@/assets/images/aboutThree/peixun.png" alt=""></div>
            <div>开始培训</div>
          </div>
          <div>
            <div>速裁通 <br> 合作流程</div>
            <div class="backMe" style="margin-top:20px;cursor: pointer;" @click="Jump()">找我合作</div>
          </div>
          <div>
            <div class="imgDiv"><img src="@/assets/images/aboutThree/hezuo.png" alt=""></div>
            <div>达成合作</div>
          </div>
        </div>
        <div class="pathClass" >
          <img class="upZhuan" src="@/assets/images/aboutThree/j1.png" alt="">
          <img class="xuanzhuan" src="@/assets/images/aboutThree/j1.png" alt="">
        </div>
        <div class="pathClass">
          <div>
            <div class="imgDiv"><img src="@/assets/images/aboutThree/queding.png" alt=""></div>
          </div>
          <img class="zleft" src="@/assets/images/aboutThree/j1.png" alt="">
          <div>
            <div class="imgDiv"><img src="@/assets/images/aboutThree/queding.png" alt=""></div>
          </div>
          <img class="zleft" src="@/assets/images/aboutThree/j1.png" alt="">
          <div>
            <div class="imgDiv"><img src="@/assets/images/aboutThree/shenpi.png" alt=""></div>
          </div>
        </div>
        <div class="pathClass" style="padding-right:-8px;width: 105%;">
            <div>完成签约</div>
            <div>确定合同</div>
            <div>发起合同审批</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'about3',
  data() {
    return {
      myList: [
        {
          title: '培训支持',
          xiangqing: '安排专业团队为您进行关于产品的使用介绍、售前、售中、售后、品牌推广等相关培训，定期/不定期地对产品更新和业务方面进行培训，并提供产品手册、折页和案例分析等培训和宣传资料'
        },
        {
          title: '技术支持',
          xiangqing: '为您提供技术支持平台，提供专业技术支持服务和技术维护服务，保证产品的高可用性'
        },
        {
          title: '推广支持',
          xiangqing: '通过官网展示，文章推广、媒体采访、展会活动等进行宣传，帮助您建立和推广品牌信息，扩大品牌知名度，揽获更多商机'
        },
        {
          title: '销售支持',
          xiangqing: '随时为您和客户提供产品、技术等方面的咨询服务，针对售前、售中、售后全方位为您提供销售支持'
        }

      ],
      pList: [
        {
          title: '中国境内工商局合法注册的企业、有独立法人'
        },
        {
          title: '公司五证齐全 '
        },
        {
          title: '有固定的办公场地及营销团队或 品牌推广团队'
        },
        {
          title: '企业无不良税收及违法记录'
        }
      ]
    }
  },
  methods:{
    Jump(){
      window.location.href='http://47.100.78.124:9982'
    }
  }
}
</script>

<style lang="less" scoped>
.pathClass {
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
// .pathClass:nth-of-type(3){
//   h1{
//     font-size: 36px;
//   }
// }
.pathClass:nth-of-type(3),.pathClass:nth-of-type(5){
  height: 200px;
}
.xuanzhuan {
  transform: rotate(90deg);
  position: relative;
  left: 30px;
}
.backMe{
  background: #1DD2AF;
  border-radius: 3px;
  color: #ffffff;
  padding: 10px 20px;
}

.zleft {
  transform: rotate(180deg);
}
.zhuan{
  width: 60%;
  margin:auto;
  text-align: center;
}

.upZhuan {
  transform: rotate(270deg);
  position: relative;
  right: 40px;
}

.imgDiv{
  width: 118px;
  height: 118px;
  background: #ffffff;
  border: 2px solid #1DD2AF;
  box-shadow: 0px 25px 27px 0px rgba(140,99,78,0.1000);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  img{
    width: 78px;
    height: 78px;
  }
}



* {
  margin: 0;
  padding: 0;
}

.aboutZ {
  width: 75%;
  height: 100%;
  background-color: #FFFFFF;
  box-shadow: 0px 24px 32px 0px rgba(105, 105, 105, 0.1200);
  border-radius: 10px;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;

  h2 {
    padding: 20px 0;
    font-size: 32px;
    color: #2C3E50;
  }

  .con {
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-bottom: 60px;

    li {
      width: 35%;
      margin: 20px 0;

      h4 {
        text-align: left;
        font-size: 24px;
        font-weight: 400;
        color: #31CDAF;
        line-height: 36px;
        margin-bottom: 5px;
      }

      p {
        text-align: left;
        font-size: 16px;
      }
    }

  }

  .Line {
    width: 60px;
    height: 2px;
    background: #1DD2AF;
    margin: -10px auto 20px auto;

  }
}

.mincon {
  width: 100%;
  height: 542px;
  margin: 69px 0 122px;
  background-image: url("../assets/images/aboutThree/pic1.png");
  background-size: 100% 100%;
  text-align: center;

  .diannao {
    padding: 108px 0;
    margin: 0 auto;

    .title {
      font-size: 34px;
      padding: 30px 0;
      color: #ffffff;
    }

    .img {
      position: relative;
      width: 1100px;
      height: 600px;
      margin: 0 auto;
      img {
        width: 100%;
      }
    }
  }

}

.rightImg {
  position: relative;
  top: -100%;
  width: 500px;
  left: 30%;
  font-size: 24px;
  margin-top: 40px;
  text-align: left;
  display: flex;
  align-items: center;

  img {
    width: 80px !important;
    height: 16px;
    margin-right: 20px;
    vertical-align: middle;
  }
  display: flex;
}

.path {
  width: 1317px;
  height: 100%;
  background: #FFFFFF;
  box-shadow: 0px 24px 32px 0px rgba(105, 105, 105, 0.1200);
  border-radius: 10px;
  margin: 2rem auto 0.5rem auto;
  padding: 80px 0;

}

</style>
